<template>

  <!-- 登录页面 -->

  <div class="login">
    <div class="forms">
      <div style="background-color: #fff;width: 400px;padding: 30px;">
        <h3>电商管理系统</h3>
        <el-form ref="forms" :rules="rules" :model="ruleForm">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"
                      clearable></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"
                      prefix-icon="el-icon-view" placeholder="请输入密码" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-eleme" type="primary" class="submit"
                       @click="submitForm()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
// import axios from "axios";
import axios from '@/utils/request'
import router from "@/router";

export default {
  data() {
    return {
      ruleForm: {
        username: 'admin',
        password: '123',
      },
      message: '',
    };
  },
  methods: {
    submitForm() {
        axios.post("/user/login",this.ruleForm).then(res=>{
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            router.push("./student")
          //存缓存
           localStorage.setItem("token",res.data.token)
        }).catch(()=>{})

    }
  }
}
</script>

<style scoped>
.login {
  background-image: url("../assets/26.jpg");
  height: 100vh;
  background-repeat: no-repeat;
  /* background-position: 0%; */
  /* background-color: #9e9e9ea1; */
  background-size: cover;
}

.forms {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.submit {
  width: 100%;
}
</style>
